<template>
  <div class="page-content">
    <div class="page-title">企业信息</div>
    <div class="content-box">
      <div class="company-state-line">
        <!-- 0-未认证 -->
        <div class="clearfix" v-if="companyInfo.status == 0">
          <span class="icon icon-auth-no fl"></span>
        </div>
        <!-- 1-待认证 -->
        <div class="clearfix" v-if="companyInfo.status == 1">
          <span class="icon icon-auth-ing fl"></span>
        </div>
        <!-- 2-认证成功 -->
        <div class="clearfix" v-if="companyInfo.status == 2">
          <span class="icon icon-auth-end fl"></span>
          <span class="tip fl">企业信息如有变更，请联系客服：{{ contactPhone }}</span>
        </div>
        <!-- 3-认证失败  -->
        <div class="clearfix" v-if="companyInfo.status == 3">
          <span class="icon icon-auth-fail fl"></span>
          <span class="tip fl">失败原因：{{ companyInfo.reviewRemark }}</span>
        </div>
      </div>
      <div class="info">
        <div class="title">基本信息</div>
        <div class="info-detail">
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>企业名称: </span>
            </div>
            <div class="word fl">
              <input
                type="text"
                :disabled="companyInfo.status == 1 || companyInfo.status == 2"
                v-model="companyInfo.name"
                placeholder="请输入"
              />
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>社会统一信用代码: </span>
            </div>
            <div class="word fl">
              <input
                type="text"
                :disabled="companyInfo.status == 1 || companyInfo.status == 2"
                v-model="companyInfo.creditCode"
                placeholder="请输入"
              />
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>企业性质: </span>
            </div>
            <div class="word fl">
              <a-select
                :defaultValue="properDes"
                :disabled="companyInfo.status == 1 || companyInfo.status == 2"
                @change="editChangeProper"
              >
                <a-select-option
                  :value="item.value"
                  v-for="item in companyPropers"
                  :key="item.text"
                >
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>企业规模: </span>
            </div>
            <div class="word fl">
              <input
                type="text"
                :disabled="companyInfo.status == 1 || companyInfo.status == 2"
                v-model="companyInfo.peopleCnt"
                placeholder="请输入企业规模，参考格式：50~100人"
              />
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>企业地址: </span>
            </div>
            <div class="word fl">
              <input
                type="text"
                :disabled="companyInfo.status == 1 || companyInfo.status == 2"
                v-model="companyInfo.address"
                placeholder="请输入"
              />
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>营业执照扫描件: </span>
            </div>
            <div class="word clearfix fl">
              <img
                class="fl"
                v-if="uploadImageUrl || companyInfo.licenseImage"
                :src="uploadImageUrl || companyInfo.licenseImage"
                alt="file"
              />
              <a-upload
                v-if="companyInfo.status == 0 || companyInfo.status == 3"
                name="file"
                list-type="picture-card"
                class="avatar-uploader"
                :show-upload-list="false"
                action="https://api.zghprlzy.com/images"
                :before-upload="beforeUpload"
                @change="handleChange"
              >
                <div>
                  <a-icon :type="loading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text">
                    上传
                  </div>
                </div>
              </a-upload>
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>企业法人姓名: </span>
            </div>
            <div class="word fl">
              <input
                type="text"
                :disabled="companyInfo.status == 1 || companyInfo.status == 2"
                v-model="companyInfo.legalPerson"
                placeholder="请输入"
              />
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>法人身份证: </span>
            </div>
            <div class="word fl">
              <input
                type="text"
                maxlength="18"
                :disabled="companyInfo.status == 1 || companyInfo.status == 2"
                v-model="companyInfo.legalIdCardNo"
                placeholder="请输入"
              />
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <!-- <span class="dot">*</span> -->
              <span>企业介绍: </span>
            </div>
            <div class="word fl">
              <div class="tip" v-if="companyInfo.status == 1 || companyInfo.status == 2">
                {{ companyInfo.intro }}
              </div>
              <div v-else>
                <textarea
                  placeholder="请输入"
                  maxlength="300"
                  name=""
                  id=""
                  v-model="companyInfo.intro"
                ></textarea>
                <div class="num" v-if="companyInfo.status == 1 || companyInfo.status == 2">
                  0 / 300
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="info">
        <div class="title">联系人信息</div>
        <div class="info-detail">
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>联系人姓名: </span>
            </div>
            <div class="word fl">
              <input
                type="text"
                :disabled="companyInfo.status == 1 || companyInfo.status == 2"
                v-model="companyInfo.contactName"
                placeholder="请输入"
              />
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>联系人手机号: </span>
            </div>
            <div class="word fl">
              <input
                type="text"
                maxlength="11"
                :disabled="companyInfo.status == 1 || companyInfo.status == 2"
                v-model="companyInfo.contactPhone"
                placeholder="请输入"
              />
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>联系人职务: </span>
            </div>
            <div class="word fl">
              <input
                type="text"
                :disabled="companyInfo.status == 1 || companyInfo.status == 2"
                v-model="companyInfo.contactJob"
                placeholder="请输入"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="clearfix">
        <div class="submit-btn btn fl" @click="btnHandler">{{ btnText }}</div>
      </div>
    </div>
    <a-modal
      v-model="changeContact"
      class="add-job-modal"
      centered
      destroyOnClose
      :width="620"
      title="编辑联系人"
      @ok="ContactOk"
    >
      <div class="add-job-item clearfix">
        <div class="front fl">
          <span class="dot">*</span>
          <span class="name">联系人：</span>
        </div>
        <div class="input-box fl">
          <input type="text" placeholder="请输入" v-model="changeContactParams.contactName" />
        </div>
      </div>
      <div class="add-job-item clearfix">
        <div class="front fl">
          <span class="dot">*</span>
          <span class="name">联系人手机号：</span>
        </div>
        <div class="input-box fl">
          <input
            type="text"
            placeholder="请输入"
            v-model="changeContactParams.contactPhone"
            maxlength="11"
          />
        </div>
      </div>
      <div class="add-job-item clearfix">
        <div class="front fl">
          <span class="dot">*</span>
          <span class="name">联系人职务：</span>
        </div>
        <div class="input-box fl">
          <input type="text" placeholder="请输入" v-model="changeContactParams.contactJob" />
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      uploadImageUrl: "",
      changeContact: false,
      loading: false,
      contactPhone: this.$config.contactPhone,
      companyPropers: [],
      properDes: ""
    };
  },
  computed: {
    companyInfo() {
      return this.$store.state.companyInfo;
    },
    changeContactParams() {
      return {
        contactName: this.$store.state.companyInfo.contactName,
        contactPhone: this.$store.state.companyInfo.contactPhone,
        contactJob: this.$store.state.companyInfo.contactJob
      };
    },
    btnText() {
      let text = "";
      if (this.companyInfo.status === 0) {
        text = "提交";
      }
      if (this.companyInfo.status === 1) {
        text = "撤销认证";
      }
      if (this.companyInfo.status === 2) {
        text = "编辑联系人";
      }
      if (this.companyInfo.status === 3) {
        text = "重新提交";
      }
      return text;
    }
  },
  created() {
    this.getCompanyInfo().then((resw) => {
      this.properDes = resw.model.properDes;
      // 获取企业性质
      this.$http.get("/commons/company-propers", { params: { isLimit: false } }).then((res) => {
        if (res.success) {
          this.companyPropers = res.model.companyPropers;
          this.companyPropers.unshift({
            text: resw.model.properDes || "请选择",
            value: ""
          });
        }
      });
    });
  },
  methods: {
    ...mapActions(["getCompanyInfo"]),
    editChangeProper(value) {
      this.companyInfo.proper = value;
    },
    handleChange(info) {
      if (info.file.status === "uploading") {
        this.loading = true;
      }
      if (info.file.status === "done") {
        console.log(info.file);
        if (info.file.response.success) {
          this.uploadImageUrl = info.file.response.model;
          this.companyInfo.licenseImage = info.file.response.model;
          this.loading = false;
        } else {
          this.$message.error(info.file.response.message);
        }
      }
      this.loading = false;
    },
    beforeUpload(file) {
      const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.error("You can only upload JPG file!");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("Image must smaller than 2MB!");
      }
      return isJpgOrPng && isLt2M;
    },
    btnHandler() {
      let { companyInfo } = this;
      let diyParams = JSON.parse(JSON.stringify(companyInfo));
      if (companyInfo.status === 0) {
        this.$confirm({
          title: "提示企业认证申请？",
          content: "请确认所填企业信息无误，平台审核通过后，不允许企业自行修改信息",
          onOk: () => {
            let params = Object.assign(diyParams, { status: 1 });
            this.$http.put("/companies", params).then((res) => {
              if (res.success) {
                this.companyInfo.status = 1;
                this.$message.success("提交认证成功");
              } else {
                this.$message.error(res.message);
                console.log(companyInfo.status, "companyInfo.status11");
              }
            });
          }
        });
      }
      if (companyInfo.status === 1 || companyInfo.status === 3) {
        let title = "";
        let content = "";
        let status = 0;
        this.companyInfo.status === 1 ? (status = 0) : (status = 1);
        this.companyInfo.status === 1 ? (title = "撤销认证申请？") : (title = "提示企业认证申请？");
        this.companyInfo.status === 1
          ? (content = "确认后，需重新提交申请才可通过企业认证")
          : (content = "请确认所填企业信息无误，平台审核通过后，不允许企业自行修改信息");
        this.$confirm({
          title: title,
          content: content,
          onOk: () => {
            this.$http.put("/companies/statuses", { status }).then((res) => {
              if (res.success) {
                if (this.companyInfo.status === 1) {
                  this.companyInfo.status = 0;
                } else {
                  this.companyInfo.status = 1;
                }
                this.$message.success("提交成功");
              } else {
                this.$message.error(res.message);
              }
            });
          }
        });
      }
      if (companyInfo.status === 2) {
        this.changeContact = true;
      }
    },
    ContactOk() {
      this.$http.put("/companies/contact-users", this.changeContactParams).then((res) => {
        if (res.success) {
          this.changeContact = false;
          this.getCompanyInfo();
          this.$message.success("提交成功");
        } else {
          this.$message.error(res.message);
        }
      });
    }
  }
};
</script>

<style lang="less"></style>
